@namespace AspireFyh.AntdWebApp.Pages.Dashboard.Analysis
@layout DashboardLayout
@page "/"
@inject NavigationManager NavigationManager

<div id="screen" class="container" style="background-image: url('assets/img/chinaMap.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    background-attachment: fixed;">
    <div class="titleBox">
        <img class="titBg" src="assets/img/titbg.png" alt="titleBg"/>
        <a class="timeBox" style="position: absolute;right: 200px;top: 40px;margin-left: 50px;color: #19FCFF;">
            2025-01-23 11：21：30
            <img @click="NavigateToView" src="assets/img/scale.png" style="margin-left: 50px;height: 20px;width: 20px">
        </a>
    </div>
    <div class="contentBox">
        <div class="leftContent">
            <div class="plate">
                <div class="ptit" style="background: url('assets/img/tbg.png') no-repeat top;">
                    <img class="devManager" src="assets/img/timg.png" alt="devM"/>设备管理
                </div>
                <div class="devBox" >
                    <div class="item" >
                        <div class="info">
                            <div style="color: #2EE2F3" class="num">100</div>
                            <div class="name">设备总数</div>
                        </div>
                        <img src="assets/img/dev1.png"  alt="dev1"/>
                    </div>
                    <div class="item" >
                        <div class="info">
                            <div style="color: #41E99D" class="num">50</div>
                            <div class="name">在线数</div>
                        </div>
                        <img src="assets/img/dev2.png"  alt="dev2"/>
                    </div>
                    <div class="item" >
                        <div class="info" >
                            <div style="color: #EB6624" class="num">50</div>
                            <div class="name">离线数</div>
                        </div>
                        <img src="assets/img/dev3.png"  alt="dev3"/>
                    </div>
                    <div class="item">
                        <div class="info">
                            <div style="color: #FFB700" class="num">0</div>
                            <div class="name">预警数</div>
                        </div>
                        <img src="assets/img/dev4.png"  alt="dev4"/>
                    </div>
                </div>
            </div>
            <div class="plate">
                <div class="ptit" style="background: url('assets/img/tbg.png') no-repeat top;">
                    <img alt="connect" src="assets/img/timg.png"/>连接状态
                </div>
                <div class="deviceName" style="background: url('assets/img/devBg.png') no-repeat top; background-size: 100%;">
                    <div class="deviceNameOi">
                        <div class="active">设备名称</div>
                    </div>
                </div>
                <div class="timeBox">
                    <div class="item item1" style="background: url('assets/img/time1.png') no-repeat top; background-size: 100%;">
                        <div class="time">
                            <div class="active">100h</div>
                        </div>
                        <div class="name">离线时间</div>
                    </div>
                    <div class="item item2" style="background: url('assets/img/time2.png') no-repeat top; background-size: 100%;">
                        <div class="time">
                            <div class="active">100h</div>
                        </div>
                        <div class="name">在线时间</div>
                    </div>
                    <div class="item item3" style="background: url('assets/img/time3.png') no-repeat top; background-size: 100%;">
                        <div class="time">
                            <div class="active">100</div>
                        </div>
                        <div class="name">报警总数</div>
                    </div>
                </div>
            </div>
            <div class="plate" style="padding-top:10px;">
                <div class="ptit" style="background: url('assets/img/tbg.png') no-repeat top;">
                    <img src="assets/img/timg.png"/>预警信息统计
                </div>
                <div class="listBox">
                    <div class="tab">
                        <div class="item" style="width: 40%">预警时间</div>
                        <div class="item" style="width: 20%">设备名称</div>
                        <div class="item" style="width: 20%">预警阀值</div>
                        <div class="item" style="width: 20%">预警项</div>
                        <div class="item" style="width: 20%">预警值</div>
				 
                    </div>
                    <div class="rowBox">
                        <div class="row" v-for="(item,i) in alertList" :key="item+i">
                            <div class="item" style="width: 40%;color:snow">2025-01-23</div>			 
                            <div class="item" style="width: 20%;color:snow">D00001</div>
                            <div class="item" style="width: 20%;color:snow">0.7</div>
                            <div class="item" style="width:20%;color:red">水分</div>
                            <div class="item" style="width:20%;color:red">0.9</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="midContent">
            <div class="plate" style="padding-top: 10px">
                <div class="ptit" style="background: url('assets/img/tbg.png') no-repeat top;">
                    <img src="assets/img/timg.png">最新数据
                </div>
                <div class="listBox" >
                    <div class="tab" style="padding-right: 15px;">
                        <div style="display: flex;width: 100%;" > 
                            <div class="item" style="width: 20%">时间</div>
                            <div class="item" style="width: 10%">终端编码</div>
                            <div class="item" style="width: 10%">设备编码</div>
                            <div class="item" style="width: 10%">设备名称</div>
                            <div class="item" style="width: 10%">温度</div>
                            <div class="item" style="width: 10%">密度</div>
                            <div class="item" style="width: 10%">粘度</div>
                            <div class="item" style="width: 10%">介电常数</div>
                            <div class="item" style="width: 10%">含水量</div>
                        </div>
                    </div>
                    <div class="rowBox">
                        <div class="row" v-for="(item,i) in newDataList" :key="item+i">
                            <div class="item" style="width: 20%">{{item.date}}</div>
                            <div class="item" style="width: 10%">{{item.sensor_sn}}</div>
                            <div class="item" style="width: 10%">{{item.device_code}}</div>
                            <div class="item" style="width: 10%">{{item.device_name}}</div>
                            <div class="item" style="width: 10%">{{item.temper}}</div>
                            <div class="item" style="width: 10%">{{item.dens}}</div>
                            <div class="item" style="width: 10%">{{item.vis}}</div>
                            <div class="item" style="width: 10%">{{item.diel}}</div>
                            <div class="item" style="width: 10%">{{item.ppm}}</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="rightContent">
            <div class="plate">
                <div class="ptit" style="background: url('assets/img/tbg.png') no-repeat top;">
                    <img src="assets/img/timg.png">终端运行统计
                </div>
                <div ></div>
                <div id="chart1"></div>
            </div>
            <div class="plate" style="margin-top: 30px">
                <div class="ptit" style="background: url('assets/img/tbg.png') no-repeat top;">
                    <img src="assets/img/timg.png">油品信息统计
                </div>
                <div style="position: relative">
                    <div style="transform: translateY(-15px)" id="chart2">  </div>
                    <div style="transform: translateY(-15px)" class="yuan">
                        <img src="assets/img/yuan.png">
                    </div>
                    <div ></div>
                </div>
            </div>
            <div class="plate">
                <div class="ptit" style="background: url('assets/img/tbg.png') no-repeat top;">
                    <img src="assets/img/timg.png">设备类型统计
                </div>
                <div id="chart3"></div>
            </div>
        </div>
    </div>
   
</div>

@code
{
    private void NavigateToView()
    {
        NavigationManager.NavigateTo("/user/login");
    }
}

